<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css鼠标跟随的导航栏效果</title>
</head>
<style>
    nav {
        font-size: 0;
        display: flex;
        justify-content: center;
    }

    nav li {
        position: relative;
        display: inline-block;
        font-family: '微软雅黑';
        width: 100px;
        text-align: center;
        font-size: 18px;
        line-height: 40px;
        margin: 0 10px;
        cursor: pointer;
    }

    nav li:before {
        content: "";
        position: absolute;
        left: 100%;
        top: 0;
        width: 0;
        height: 40px;
        border-bottom: 2px solid #000;
        transition: 1s;
    }

    nav li:hover:before {
        width: 100%;
        left: 0;
    }

    nav li:hover ~ li:before {
        left: 0;
    }
</style>
<body>
<nav>
    <li>HTML5</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Vue</li>
    <li>WebPack</li>
</nav>
</body>
</html>